<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>{{ i18n('client.view') }}</div>
        </div>

        <div class="admin_main_block_right">
          <div>
            <el-button icon="Back" @click="router.go(-1)">
              {{ i18n('common.return') }}
            </el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 1) " name="1" :label="$t('client.basic_info')" :lazy="true">
            <basic :model="model"/>
          </el-tab-pane>
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 2) " name="2" :label="$t('client.contact_info')" :lazy="true">
            <contact :model="model"/>
          </el-tab-pane>
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 3) " name="3" :label="$t('client.demand_info')" :lazy="true">
            <demand :model="model"/>
          </el-tab-pane>
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 4) " name="4" :label="$t('client.trace_info')" :lazy="true">
            <trace :model="model"/>
          </el-tab-pane>
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 5) " name="5" :label="$t('client.browse_info')" :lazy="true">
            <browse :model="model"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup name="client-view">
  import { useBase } from "@/hooks/base/useBase"

  import Basic from '@/components/business/client/basic/index'
  import Contact from '@/components/business/client/contact/index'
  import Demand from '@/components/business/client/demand/index'
  import Trace from '@/components/business/client/trace/index'
  import Browse from '@/components/business/client/browse/index'

  const { router, query, i18n } = useBase()

  const id = ref(0)
  const type = ref(0)
  const activeName = ref('1')
  const model = ref('business/client')

  onMounted(() => {
    id.value = query.id || 0
    type.value = query.type || 0
    activeName.value = query.type ? query.type + '' : '1'
  })
</script>
